<template>
  <div class="goodList">
    <header>
      <div>
        <div>
          <van-icon name="search" />
          <input type="text" placeholder="点击搜索商品信息" />
        </div>
        <van-icon name="apps-o" class="apps" @click="tebCut" />
      </div>
      <ul>
        <li>{{ route.query.title }}</li>
        <li>价格</li>
        <li>销量</li>
        <li>新品</li>
      </ul>
    </header>

    <main>
      <noCommodity v-if="listInfo == ''" :hotInfo="hotInfo" />

      <div :class="tebIcon ? 'list_box' : 'list_boxTwo'" v-else>
        <dl v-for="(v, i) in listInfo" :key="i">
          <dd><img v-lazy="v.image" alt="" /></dd>
          <dt>
            <p class="line1">
              {{ v.store_name }}
            </p>
            <!-- <s v-show="!tebIcon">￥{{ v.ot_price }}</s> -->

            <span>￥{{ v.price }}</span>
            <p class="ys">已售{{ v.sales }}件</p>
          </dt>
        </dl>
      </div>
    </main>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { products, hotApi } from "../../api/index";
import noCommodity from "../../components/noCommodity.vue";
const route = useRoute();
console.log(route.query);
const listInfo = ref([]);
const hotInfo = ref([]);
const tebIcon = ref(true);

const tebCut = () => {
  tebIcon.value = !tebIcon.value;
  console.log(tebIcon.value);
};
onMounted(() => {
  products(route.query.cid).then((res) => {
    // console.log(res.data.data);
    listInfo.value = res.data;
    console.log(listInfo.value, 11111111111);
  });
  hotApi().then((res) => {
    hotInfo.value = res.data;
    console.log(hotInfo.value);
  });
});
</script>

<style lang="less">
.goodList {
  header {
    width: 100%;
    height: 100px;
    background-color: #e93323;
    border-bottom: 0.5px solid #f5f5f5;
    font-size: 17px;
    display: flex;
    flex-direction: column;
    .apps {
      margin: 0 10px;
      color: white;
    }
    > div {
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      div {
        padding: 5px;
        width: 100%;
        background-color: #f5f5f5;
        border-radius: 20px;
        .van-icon {
          margin: 0 10px;
          font-size: 19px;
        }
        input {
          border: 0;
          outline: none;
          flex: 1;
          background-color: #f5f5f5;
        }
      }
    }

    ul {
      width: 100%;
      flex: 1;
      display: flex;
      background: #fff;
      align-items: center;
      justify-content: space-evenly;
    }
  }
  main {
    width: 100%;
    overflow: auto;
    .imgBox {
      // padding: 100px;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      // align-items: center;
      img {
        width: 200px;
        height: 170px;
        margin: 0 auto;
      }
    }
    .list_boxTwo {
      background: #f5f5f5;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      padding: 0 11px;
      // flex-wrap: wrap;
      dl {
        // margin: 5px 2.5%;
        width: 100%;

        background: #fff;
        display: flex;
        border-bottom: 0.5px solid #f6f6f6;
        dd {
          // width: 100%;
          // height: 173px;
          padding: 10px;
          img {
            width: 80px;
            height: 80px;
            border-radius: 5px;
          }
        }

        dt {
          width: 100%;
          display: flex;
          flex-direction: column;
          padding: 5px;
          flex-direction: column;
          justify-content: space-around;
          p {
            font-size: 16px;
          }
          .ys {
            font-size: 12px;
            color: #aaa;
          }
          s {
            font-size: 13px;
            color: #aaa;
          }
          span {
            color: rgb(249, 84, 41);
            font-size: 18px;
            font-weight: 550;
            margin-top: 20px;
          }
        }
      }
    }
    .list_box {
      background: #f5f5f5;
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      dl {
        margin: 5px 2.5%;
        width: 45%;
        border-radius: 10px;
        background: #fff;

        dd {
          width: 100%;
          height: 173px;
          img {
            width: 100%;
            height: 170px;
            border-radius: 10px 10px 0 0;
          }
        }

        dt {
          width: 100%;
          display: flex;
          flex-direction: column;
          padding: 5px;
          p {
            font-size: 16px;
          }
          .ys {
            font-size: 12px;
            color: #aaa;
          }
          s {
            font-size: 13px;
            color: #aaa;
          }
          span {
            color: rgb(249, 84, 41);
            font-size: 18px;
            font-weight: 550;
          }
        }
      }
    }
    .line1 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  }
}
</style>
